<template>
  <div>
    <Row :gutter="4" >
      <Col span="6"><DateTimeRangeSelect ref="eventTime" v-model="dateRange" :placeholder="$t('datetime')" width="100%"></DateTimeRangeSelect></Col>
      <Col span="4"><Device5gModelSelect :cate=2 ref="device5gModelSelect" width="100px" v-model="queryParam.where.deviceId"/> </Col>
      <Col span="4"><OrganizationTree ref="srhOrgSelect" width="200px" v-model="queryParam.where.orgId"></OrganizationTree> </Col>
      <Col span="4"><UserSelect ref="srhUserSelect" width="200px" :placeholder="$t('select_people')" v-model="queryParam.where.userId"></UserSelect> </Col>
      <Col span="1"><Button type="primary" icon="ios-search" @click="getData">{{$t('search')}}</Button></Col>
    </Row>

    <Table border :columns="columns" :data="tableData" :loading="tableLoading">
      <template slot-scope="{ row, index }" slot="online">
        <span v-if="row.online" style="color: green" >{{$t('online')}}</span>
        <span v-if="!row.online" style="color: red">{{$t('offline')}}</span>
      </template>
    </Table>
    <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
  </div>
</template>
<script>
import DateTimeRangeSelect from "_c/topnav/DateTimeRangeSelect"
import TopnavPage from "_c/topnav/TopnavPage";
import OrganizationTree from "_c/topnav/OrganizationTree";
import DeviceOnline from "@/api/DeviceOnline"
import Device5gModelSelect from "_c/topnav/Device5gModelSelect";
import UserSelect from "_c/topnav/UserModelSelect";
import StatisticsOnlineDetail from "@/view/Home/Moudle/statistics/StatisticsOnlineDetail";
import {apiResult} from "@/libs/util";

export default {
  name: 'StatisticsOnline',
  components: {TopnavPage,OrganizationTree,DateTimeRangeSelect,UserSelect,StatisticsOnlineDetail,Device5gModelSelect},
  data(){
    return {
      api: new DeviceOnline(),
      columns: [
        {
          title: this.$t('detail'),
          type: 'expand',
          width: 120,
          render: (h, params) => {
            return h(StatisticsOnlineDetail, { //自定义组件 DeviceLog 不加引号
              props: {
                'deviceId': params.row.deviceId, //子组件传值
                'dateRange': this.dateRange
              }
            })
          }
        },
        {title: this.$t('device_code'), key: 'deviceCode', sortable: true,width: 250,align: 'center'},
        {title: this.$t('device_name'), key: 'deviceName', sortable: true, width: 200},
        {title: this.$t('organization_name'), key: 'orgName', sortable: true, width: 200},
        {title: this.$t('personnel'), key: 'userName', sortable: true, ellipsis:true,width: 175},
        {title: this.$t('online_duration')+"("+this.$t('minutes')+")", key: 'onlineMin', sortable: true, ellipsis:true,width: 225},
        {title: this.$t('online_times'), key: 'onLineCount', sortable: true, width: 200},
      ],
      dateRange:[],
      queryParam: {
        page: {
          //desc: ['create_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {
          keyword:null,
          deviceId: null,
          fromTime: null,
          toTime: null,
          userId: null,
          orgId: null,
          deviceCode:null
        },
      },
      tableData:[],
      tableLoading:false

    }
  },
  methods:{
    changePage(){
      this.getData()
    },
    getData(){
      this.tableLoading = true;
      /** 生成查询条件 */
      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0]=="")){
        this.queryParam.where.fromTime = this.dateRange[0];
        this.queryParam.where.toTime = this.dateRange[1];
      }
      this.api.querySumPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;
        })
        this.tableLoading = false;
      })
    },
  },
  mounted() {
    /** 为了显示用，调置默认值 */
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    start.setHours(0);
    start.setMinutes(0);
    start.setSeconds(0);
    start.setMilliseconds(0);
    end.setHours(23);
    end.setMinutes(59);
    end.setSeconds(59);
    end.setMilliseconds(999);

    this.dateRange=[start, end];
    this.getData();

    console.log("Statistics.mounted");
  }
}
</script>
